<template>
	<view class="wrap">
		<view class="content">
			<u-form :model="form" ref="uForm">
				<view class="title">欢迎登录</view>
				<u-form-item prop="username">
					<u-input v-model="form.username" type="text" placeholder="请输入用户名" />
				</u-form-item>
				<u-form-item prop="password">
					<u-input v-model="form.password" type="password" placeholder="请输入密码" />
				</u-form-item>
				<button @tap="login" :style="[inputStyle]" class="login-btn">登录</button>
				<view class="register-text" @tap="toRegister">还没有账号，立即注册</view>
			</u-form>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				username: 'admin',
				password: '123456',
			}
		}
	},
	onLoad() {
	  
	},
	computed: {
		inputStyle() {
			let style = {};
			if(this.form.username&&this.form.password) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		}
	},
	methods: {
		async login() {
			if (!this.form.username) {
				this.$u.toast('请输入用户名')
				return
			}
			
			if (!this.form.password) {
				this.$u.toast('请输入密码')
				return
			}
			// console.log(this.form.username);
			// console.log(this.form.password);
			let res = await uniCloud.callFunction({
			    name: 'uni-users',
			    data: {
					action: 'login',
			        username: this.form.username,
			        password: this.form.password,
			    },
			});
			console.log(res);
			if (res.result.code === 0) {
				this.$u.toast('登陆成功');
				 uni.reLaunch({
				     url: '/pages/index/index'
				 });
			} else {
				this.$u.toast(res.result.msg);
			}
		},
		toRegister() {
			this.$u.route('/pages/register/register');
		}
	}
};

// console.log(this.username)
// console.log(this.password)
</script>

<style lang="scss" scoped>
.wrap {
	font-size: 28rpx;
	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
		.login-btn {
			margin-top: 40rpx;
			background-color: rgb(253, 243, 208);
			color: #FFFFFF;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			
			&::after {
				border: none;
			}
		}
		.register-text{
			padding: 20rpx 0;
			text-align: right;
			color: $u-type-primary;
		}
	}
}
</style>
